<script>
import { ref } from "vue";
import { closeToast, showLoadingToast } from "vant";
import { useRouter } from "vue-router";


export default {
  setup() {
    const value1 = ref("");
    const value2 = ref("");
    const value3 = ref("abc");
    const value4 = ref("");
    const pattern = /\d{6}/;
    const $router = useRouter();
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /1\d{10}/.test(val);
    // 校验函数可以直接返回一段错误提示
    const validatorMessage = (val) => `${val} 不合法，请重新输入`;
    function login (){
    
    };
    // 校验函数可以返回 Promise，实现异步校验
    const asyncValidator = (val) =>
      new Promise((resolve) => {
        showLoadingToast("验证中...");

        setTimeout(() => {
          closeToast();
          resolve(val === "1234");
          $router.push("/Index")
        }, 1000);
      });

    const onFailed = (errorInfo) => {
      console.log("failed", errorInfo);
    };

    return {
      value1,
      value2,
      value3,
      value4,
      pattern,
      onFailed,
      validator,
      asyncValidator,
    };
  },
};
</script>

<template>
  <div>
    <h4>Rpk科技有限公司打卡系统</h4>
    <div class="imgs">
      <img
        src="https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20220916/4/20/bb980cc064fc127b07d5453b01c7f417.png"
        alt=""
      />
    </div>
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="value1"
          name="pattern"
          placeholder="请输入账号"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          v-model="value2"
          name="validator"
          placeholder="请输入密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 返回错误提示 -->
        <van-field
          v-model="value3"
          name="validatorMessage"
          placeholder="校验函数返回错误提示"
          :rules="[{ validator: validatorMessage }]"
        />
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
          v-model="value4"
          name="asyncValidator"
          placeholder="请输入验证码"
          :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" @click="login" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped lang="scss">
h4 {
  text-align: center;
  color: red;
}
.imgs {
  width: 20rem;
  height: 10rem;
  margin: 0 auto;
}
img {
  width: 20rem;
}
</style>